<template>

    <div>
        <div class="doctorList_main" v-if="message && message">
            <img class="img" :src="message.img" alt="">
            <div class="font23Height">
                <div>
                    <span class="fontSW">{{ message.name }}</span>
                    <span class="font12" style="padding-left: 16px;">{{ message.job }}</span>
                </div>
                <div class="font12Back">
                    <span>{{ message.child }}</span>
                    <span style="padding-left: 16px;">{{ message.hospital.name }}</span>
                </div>
                <span class="font_webkit">擅长：{{ message.good }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, nextTick, computed } from 'vue';

import axios from 'axios';





// onMounted(() => {
//     getDoctorList()
// })


const props = defineProps({
    message: {
        type: Object,
    }
})








const RENDER_SIZE = 5; // 假设每次渲染 15 条数据
const ITEM_HEIGHT = 100; // 假设每个 item 真实渲染后高度接近 100px
// 假设 10000 条数据
const allItems = Array.from({ length: 10000 }, (v, i) => {
    return {
        id: i,
        text: `item-${i + 1}`,
        // 设置随机高度, 在实际项目中应该根据 item 的实际情况设置一个接近于 item 渲染后的高度
        height: Math.floor(Math.random() * 100) + 50
    };
});

const viewportRef = ref(null);
const renderItems = ref([]); // 当前需要渲染的 item
const renderTotalHeight = ref(0); // 整个已渲染列表的高度
const hasRenderedItemsHeight = ref({}); // 已渲染的 item 数据 height 
const offset = ref(0);

const updateRenderItems = () => {
    const scrollTop = viewportRef.value?.scrollTop;

    let startIndex = 0;
    let startOffset = 0;

    for (let i = 0; i < allItems.length; i++) {
        const h = hasRenderedItemsHeight.value[allItems[i].id] || ITEM_HEIGHT;
        startOffset += h;
        if (startOffset >= scrollTop) {
            startIndex = i;
            break;
        }
    }

    renderItems.value = allItems.slice(startIndex, startIndex + RENDER_SIZE);
    offset.value = startOffset - hasRenderedItemsHeight.value[allItems[startIndex].id];

}

const renderItemsRef = (el, id) => {
    if (el) {
        // 存放已渲染的 item 的高度
        hasRenderedItemsHeight.value[id] = el.offsetHeight;
        // 更新容器的高度
        nextTick(updateRenderTotalHeight);
    }
}

const updateRenderTotalHeight = () => {
    renderTotalHeight.value = allItems.reduce((sum, item) => sum + (hasRenderedItemsHeight[item.id] || ITEM_HEIGHT), 0);
}

const handleScroll = () => {
    updateRenderItems();
}

onMounted(() => {
    updateRenderItems();
})


</script>

<style lang="scss" scoped>
.doctorList_main {
    background-color: #ffffff;
    margin-top: 16px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1rem;

    .img {
        width: 2.8125rem;
        height: 2.8125rem;
    }
}

.viewport {
    height: 400px;
    overflow-y: auto;
    position: relative;
}

.content-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}

.content-item {
    width: 100%;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>